<template>
  <div class="comments">
    <van-nav-bar
      fixed
      left-arrow
      title="商品评论页"
      @click-left="$router.back()"
    />
    <div class="comm-tabs">
      <van-tabs v-model="active">
        <van-tab>
          <template #title>好评({{ comtotal }})</template>
          <!--          评论内容-->
          <div v-for="(item, index) in commelist" :key="index" class="comm-lit">
            <div class="col-top">
              <div class="cot-lift">
                <img :src="item.user.avatar_url || defing" />
              </div>
              <div class="cot-lift1">{{ item.user.nick_name }}</div>
              <div class="cot-center">
                <van-rate
                  :size="15"
                  :value="item.score / 5"
                  color="#ffd21e"
                  void-color="#eee"
                  void-icon="star"
                />
              </div>
              <div class="cot-right">{{ item.create_time }}</div>
            </div>
            <div class="col-bootom">{{ item.content }}</div>
          </div>
        </van-tab>
        <van-tab title="好评">内容 2</van-tab>
        <van-tab title="中评">内容 3</van-tab>
        <van-tab title="差评">内容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { comentt } from '@/api/detail'
import defing from '@/assets/img/deft.png'

export default {
  components: {},
  data () {
    return {
      active: 2,
      scoreType: -1,
      page: 1,
      defing, // 默认头像
      commelist: [],
      comtotal: []
    }
  },
  computed: {
    goodsId () {
      return this.$route.query.goodsId
    }
  },
  // 方法集合",
  methods: {
    async getcommet () {
      const {
        data: {
          data: { list }
        }
      } = await comentt(this.goodsId, this.scoreType, this.page)
      this.commelist = list.data
      this.comtotal = list.total
      console.log(list)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.getcommet()
  }
}
</script>
<style lang="less">
.comments {
  .van-nav-bar__title {
    font-weight: bolder;
  }

  .comm-tabs {
    margin-top: 50px;
  }

  .comm-lit {
    padding: 20px;

    .col-top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .cot-lift {
        width: 20px;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .cot-lift1 {
        margin-left: 5px;
        font-size: 13px;
        width: 60px;
        color: #747475;
      }

      .cot-center {
        margin-left: 50px;
        width: 95px;
      }

      .cot-right {
        margin-left: 10px;
        width: 100px;
        font-size: 15px;
        color: #747475;
      }
    }
  }
}
</style>
